<!--
 * @Author: 宏联-vision java_hongwx@163.com
 * @Date: 2025-04-07 08:26:29
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-11-05 10:12:47
 * @FilePath: Index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="faceHomeBox" ref="homeRef" :style="'transform:scale(' +
        scaleValue +
        ') translate(-50%,-50%)  translateZ(0)  translate3d(0,0,0)'
        ">
         <!-- 加载层 -->
         <div class="loading-view-box" v-show="showLoading">
            <breeding-rhombus-spinner style="margin-bottom: 30px;" :animation-duration="3000" :size="100"
                color="#409EFF" />
            正在努力加载中，请稍后...
        </div>
        <!-- 头部 -->
        <Header ref="header"></Header>
        <!-- 主内容 -->
        <div class="screenBox" :style="{ height: screenBoxHeight + 'px' }">
            <div class="screenLeft" ref="screenLeftRef">
                <screenLeftOne ref="screenLeftOneRef">
                </screenLeftOne>
                <screenLeftTwo ref="screenLeftTwoRef" :screenLeftTwoHeight="screenLeftTwoHeight"></screenLeftTwo>
            </div>
            <div class="screenCenter">
                <screenCenterOne ref="screenCenterOneRef" :list="nowList">
                </screenCenterOne>
                <screenCenterTwo ref="screenCenterTwoRef" :list="list" :screenCenterTwoHeight="screenCenterTwoHeight">
                </screenCenterTwo>
            </div>
            <div class="screenRight" ref="screenRightRef">
                <screenRtOne ref="screenRtOneRef"></screenRtOne>
                <screenRtTwo ref="screenRtTwoRef" :screenRtTwoHeight="screenRtTwoHeight"></screenRtTwo>
            </div>
        </div>
        <!-- 主内容区 -->
        <Footer ref="footer"></Footer>
    </div>
</template>
<script lang="ts" setup>
import { BreedingRhombusSpinner } from 'epic-spinners'
import Header from './Common/Header.vue'
import Footer from './Common/Footer.vue'
import screenLeftOne from './screenLeftOne.vue'
import screenLeftTwo from './screenLeftTwo.vue'
import screenCenterOne from './screenCenterOne.vue'
import screenCenterTwo from './screenCenterTwo.vue'
import screenRtOne from './screenRtOne.vue'
import screenRtTwo from './screenRtTwo.vue'
import $util from "../util/util"
import { ref, onMounted, onUnmounted, watch } from "vue"
import { ElMessage } from 'element-plus'
import { PiniaStore } from '../store/index'
import { gradeMealtimeStatistic } from './Options/Api'
const scaleValue = ref<any>('')
const store = PiniaStore()
const showLoading = ref<boolean>(false)
const homeRef = ref<any>(null)
const header = ref<any>(null)
const footer = ref<any>(null)
const screenLeftOneRef = ref<any>(null) // 左侧内容区高度
const screenLeftTwoRef = ref<any>(null) // 左侧内容区高度
const screenCenterOneRef = ref<any>(null) // 主内容区高度
const screenCenterTwoRef = ref<any>(null) // 主内容区高度
const screenRtOneRef = ref<any>(null) // 右侧内容区高度
const screenRtTwoRef = ref<any>(null) // 右侧内容区高度
const screenBoxHeight = ref<number>(0) // 主内容区高度
const screenCenterTwoHeight = ref<number>(0) // 散点图和折线图的高度
const screenRtTwoHeight = ref<number>(0) // 右侧内容区高度
const screenLeftTwoHeight = ref<number>(0) // 左侧内容区高度
const getHeight = async () => {
    screenBoxHeight.value = homeRef.value.clientHeight - (header.value.$el.clientHeight ? header.value.$el.clientHeight : 0) - (footer.value.$el.clientHeight ? footer.value.$el.clientHeight : 0)
    screenLeftTwoHeight.value = screenBoxHeight.value - screenLeftOneRef.value.$el.clientHeight -  $util.fontSize(36)
    console.log(screenCenterOneRef.value.$el.clientHeight, 'screenLeftTwoHeight.value')
    screenCenterTwoHeight.value = screenBoxHeight.value - screenCenterOneRef.value.$el.clientHeight - $util.fontSize(12)
    screenRtTwoHeight.value = screenBoxHeight.value - screenRtOneRef.value.$el.clientHeight -  $util.fontSize(36)
}
const setScale = async () => {
    var vw = window.innerWidth / 1920
    var vh = window.innerHeight / 1080
    var scale = vw < vh ? vw : vh
    scaleValue.value = scale
}
const dataInfo = ref<any>({
    base: {
        level: {}, 
    },
    device:[],
    meal:{
        gradeMeal:[]
    }
})
const list=ref<any>([])
const nowList = ref<any>([])
const getScreenCenterTwoData = async () => {
    const res: any = await gradeMealtimeStatistic()
    if (res.code !== 1) return ElMessage.error(res.msg)
    return new Promise(async (resolve) => {
    list.value = res.data.facultyList
    let arr:any=[]
    res.data.facultyList.map((item: any) => {
        item.grade_list.map((items: any) => {
            arr.push({
                faculty_name: item.faculty_name,
                ...items
            }) 
        })
    })
    nowList.value = arr
    store.setLoddingStatus()
    resolve(undefined) 
  })
}
onMounted(async () => {
    await setScale()
    await getHeight()
    store.setLoddingNum()
    showLoading.value = true
   // 只在这里调用一次数据获取
   await fetchAllData()
    // 数据加载完成后启动定时刷新
    await startPeriodicFetching()
    window.addEventListener('resize', async () => {
        // 计算高度
        setTimeout(async () => {
            await setScale()
            setTimeout(async () => {
                await getHeight()
            }, 400);
        }, 100);
    })
});
const timer = ref<any>(null)
let isInitialLoad = true; // 标记是否为首次加载

// 统一的数据获取函数
const fetchAllData = async () => {
    try {
        await screenLeftOneRef.value.getList()
        await screenLeftTwoRef.value.getList()
        await getScreenCenterTwoData()
        await screenRtOneRef.value.getList()
        await screenRtTwoRef.value.getList()
        
        if (isInitialLoad) {
            // 首次加载完成后隐藏loading
            showLoading.value = false;
            isInitialLoad = false;
        }
    } catch (error) {
        console.error('数据获取失败:', error)
        // 即使出错，首次加载也隐藏loading
        if (isInitialLoad) {
            showLoading.value = false;
            isInitialLoad = false;
        }
    }
}
// 递归定时获取数据
const startPeriodicFetching = async() => {
    // 清除可能存在的旧定时器
    if (timer.value) {
        clearTimeout(timer.value);
    }
    
    // 设置新的定时器，10秒后再次执行
    timer.value = setTimeout(async () => {
        await fetchAllData();
        startPeriodicFetching(); // 递归调用，继续定时
    }, 10 * 1000);
}
onUnmounted(() => {
    clearTimeout(timer.value)
})
</script>
<style lang="scss" scoped>
.faceHomeBox {
    height: 1080px;
    width: 1920px;
    transform-origin: left top;
    position: absolute;
    left: 50%;
    top: 50%;
    background: url('@/assets/images/bg.png') no-repeat;
    background-size: 100% 100%;
    color: #ffffff;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%) translateZ(0) translate3d(0, 0, 0);

    .loading-view-box {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba($color: #000000, $alpha: 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9;
        color: #409eff;
        flex-direction: column;
    }

    .screenBox {
        width: 100%;
        padding: 12px 20px 0px 20px;
        box-sizing: border-box;
        display: flex;
        min-width:0px;

        .screenLeft {
            width: 424px;
            height: 100%;
            box-sizing: border-box;
            display: inline-block;
            vertical-align: top;
            overflow-y: hidden;
        }

        .screenCenter {
            flex: 1;
            margin: 0 20px;
        }

        .screenRight {
            display: inline-block;
            vertical-align: top;
            width: 424px;
            height: 100%;
            box-sizing: border-box;

            .rtContentBox {
                position: relative;
                margin-top: 24px;
                background: rgba(7, 77, 183, 0.16);
                padding: 20px 20px 0 20px;
            }
        }
    }
}

.dialog-box {
    position: fixed;
    /* 改为fixed定位，使其相对于整个屏幕 */
    width: 620px;
    height: 460px;
    background: #09182F;
    box-shadow: inset 0px 6px 60px 1px #5079FF;
    border-radius: 20px;
    z-index: 99999;
    padding: 0 15px;
    box-sizing: border-box;
    /* 移除margin-top，通过JS计算居中位置 */
    margin: 0;
    background: #09182F;
    box-shadow: inset 0px 6px 60px 1px #5079FF;
    border-radius: 20px;
    z-index: 99999;
    cursor: move;

    /* 显示拖拽光标 */
    .close-img-box {
        position: absolute;
        right: -10px;
        top: -10px;

        .el-image {
            width: 30px;
            cursor: pointer;
        }
    }

    .contentInfo {
        padding: 30px;

        .title {
            font-size: 15px;
            font-weight: bold;
        }

        .data {
            font-size: 14px;
            margin-top: 10px;
            margin-bottom: 15px;
        }

        p {
            font-size: 14px;
            margin: 12px 0;

            span {
                color: #5FD5EC;
            }
        }
    }
}
</style>
